@import '../globals';
@import '../progressbar';

#navigator {

  border-right: 1px solid $lineColor;
  //fix for the 1px border
  margin-right: -1px;

  background-color: $navigatorBackgroundColor;

  div.asset, div.composition, div.effect {

    cursor: pointer;
    clear: both;
    display: block;
    width: 100%;
    height: 85px;
    color: #6d6c6c;
    font-size: 0.9em;
    background-repeat: no-repeat;
    background-position: 0.9em 1.9em;
    border-bottom: 1px solid $lineColor;

    &:hover {
      cursor: pointer;
      color: $textColor;
      background-color: $highlightColor;
    }

    &.active {
      background-color: $activeColor;
    }

    &.disabled {
      @include opacity(0.5);
      cursor: wait;
    }

    &.active:hover {
      background-color: $highlightColor;
    }

    &:last-child {
      border: none;
    }

    progress {
      @include progressbar($progressBarStandardColor, $progressBarActiveColor);
      float: left;
      clear: both;
      height: 2px;

      &:after {
        clear: both;
        color: $textColor;
        content: attr(value) "%";
        text-align: right;
        font-size: 0.6em;
        position: relative;
        left: 267px;
        top: -24px;
        display: inline;

      }
    }

  }
}

#library, #compositions, #effects {
  display: block;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
}

#navigatorControl {
  @include toolbar;

  ul {
    width: 100%;
    height: 100%;
    display: table;
    float: left;

    li {
      display: table-cell;
      vertical-align: middle;
      width: (100%/3);

      list-style: none;
      text-align: center;

      border-right: 1px solid $lineColor;

      &.active {
        @include toolbarHover;
        font-weight: bold;
      }
      &:hover {
        @include toolbarHover;
        cursor: pointer;
      }

    }
  }

}

#navigatorCommands {
  @include toolbar;
  width: 100%;
  border-top: 1px solid $lineColor;
  padding: 0;

  div {
    margin: 0 auto;
    display: table;
    height: 100%;

    button {
      display: table-cell;
      vertical-align: middle;
      margin-right: 5px;
    }

    #fileBrowser {
      position: absolute;
      left: -900px;
      top: -900px;
      text-indent: -9999px;
      overflow: hidden;
    }
  }

}

#library {

  div.asset {
    background-color: $assetListBackgroundColor;
    @include transition(opacity 0.3s ease-out);

    &.video {
      background-image: url('../img/icon_video.svg');
    }

    &.image {
      background-image: url('../img/icon_image.svg');
    }
    &.audio {
      background-image: url('../img/icon_audio.svg');
    }

    div.info {
      display: block;
      width: 90%;
      float: left;
      height: 100%;

      progress {
        width: 290px;
        margin: 2px 0px 0px 55px;
      }

      span.name {
        float: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9em;
        width: 75%;
        max-width: 80%;
        overflow: hidden;
        margin: 20px 0px 0px 55px;
      }

      span.status {
        margin: 5px 0 0 55px;
        font-size: 0.7em;
        float: left;
        width: 75%;
      }

      .timecode, .fps, .dimensions, .ratio {
        margin-top: 5px;
        font-size: 0.77em;
      }

      .timecode, .fps {
        float: left;
      }

      .timecode {
        margin-left: 55px;
      }

      .dimensions, .ratio {
        float: right;
      }

      .ratio {
        margin-right: 20px;
      }

    }

    div.types {
      width: 10%;
      float: left;
      height: 100%;
      margin: 0;
      paddig: 0;

      span {
        width: 25px;
        height: 25px;
        margin-top: 1px;
        display: block;
        background-size: 100%;

        &.mp4 {
          margin-top: 0.3em;
          background-image: url('../img/icon_mp4.svg');
        }
        &.webm {
          background-image: url('../img/icon_webm.svg');
        }
        &.ogg {
          background-image: url('../img/icon_ogg.svg');
        }

        &.disabled {
          opacity: 0.4;
        }
      }
    }

  }

}

#compositions {
  display: none;

  .composition {

    background-color: $compositionListBackgroundColor;
    //http://iconmonstr.com/folder-4-icon/
    background-image: url("../img/icon_composition.svg");
    padding: 5px 0px 0px 55px;
    display: block;
    overflow: hidden;

    .title, .status, .info {
      width: 340px;
    }

    .title {
      font-size: 1em;
      margin-top: 9px;
    }

    .status {
      font-size: 0.7em;
      margin-top: 6px;
    }

    progress {
      width: 340px;
      margin-top: 2px;
      height: 2px;
      @include progressbar($progressBarStandardColor, $progressBarActiveColor);

      &:after {
        left: 315px !important;
        top: -20px !important;
      }
    }

    .info {
      display: block;
      margin-top: 12px;
      font-size: 0.8em;

      .resolution {
        float: left;
      }

      .timecode {
        float: right;
        font-weight: bold;
      }
    }

    div.controls {

      position: relative;
      left: 10%;
      top: -57px;

      div {
        height: 100%;
        margin: 0 auto;
        width: auto;
        display: table;

      }
      button {
        display: table-cell;
        vertical-align: middle;
        float: left;
      }

    }

  }
}

#effects {
  display: none;
}


